<script setup>
import {onMounted, onUnmounted} from 'vue';
import {Bg} from 'color4bg.js/src/color4bg/AbstractBackground/BlurGradient.js'

let colorBg = null; // 保存背景实例的引用

// 初始化背景
onMounted(() => {
  try {
    // 创建背景实例
    colorBg = new Bg({
      dom: 'login-background', // 传递DOM元素的ID
      colors: ["#FF9FD6", "#FEBDE2", "#FED9E9", "#FBFBFB"],
      loop: true
    });

    // 调整噪点效果（值越小噪点越少，0为无噪点）
    colorBg.update("noise", 0);
  } catch (error) {
    console.error('Failed to initialize background:', error);
  }
});

// 清理资源
onUnmounted(() => {
  if (colorBg) {
    // 清理背景实例
    const canvas = document.getElementById('colorbgcanvas');
    if (canvas) {
      canvas.remove();
    }
  }
});
</script>

<template>
  <div class="login-layout">
    <div id="login-background"></div>
    <router-view/>
  </div>
</template>

<style scoped>
.login-layout {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  position: relative;
  overflow: hidden;
}

#login-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

:deep(.login-container) {
  z-index: 1;
  position: relative;
}
</style>